<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const username = ref(userStore.user.name || '用户')
const loading = ref(false)

// 模拟数据
const statistics = ref({
  userCount: 0,
  roleCount: 0,
  menuCount: 0,
  loginCount: 0
})

// 模拟获取统计数据
const fetchStatistics = async () => {
  loading.value = true
  
  try {
    // 这里应该是实际的API调用
    // const response = await axios.get('/api/v1/statistics')
    
    // 模拟数据
    setTimeout(() => {
      statistics.value = {
        userCount: 125,
        roleCount: 8,
        menuCount: 36,
        loginCount: 1024
      }
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('获取统计数据失败:', error)
    loading.value = false
  }
}

onMounted(() => {
  fetchStatistics()
})
</script>

<template>
  <div class="dashboard-container">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎回来，{{ username }}</span>
        </div>
      </template>
      <div class="welcome-content">
        <p>欢迎使用 Gin Admin 管理系统</p>
        <p>这是一个基于 Gin + Vue 的后台管理系统</p>
      </div>
    </el-card>
    
    <el-row :gutter="20" class="statistics-row">
      <el-col :span="6">
        <el-card class="statistics-card" shadow="hover">
          <el-skeleton :loading="loading" animated>
            <template #template>
              <div style="padding: 14px">
                <el-skeleton-item variant="h3" style="width: 50%" />
                <div style="display: flex; align-items: center; margin-top: 16px">
                  <el-skeleton-item variant="text" style="margin-right: 16px" />
                  <el-skeleton-item variant="text" style="width: 30%" />
                </div>
              </div>
            </template>
            <template #default>
              <div class="statistics-item">
                <div class="statistics-title">用户数量</div>
                <div class="statistics-value">{{ statistics.userCount }}</div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="statistics-card" shadow="hover">
          <el-skeleton :loading="loading" animated>
            <template #template>
              <div style="padding: 14px">
                <el-skeleton-item variant="h3" style="width: 50%" />
                <div style="display: flex; align-items: center; margin-top: 16px">
                  <el-skeleton-item variant="text" style="margin-right: 16px" />
                  <el-skeleton-item variant="text" style="width: 30%" />
                </div>
              </div>
            </template>
            <template #default>
              <div class="statistics-item">
                <div class="statistics-title">角色数量</div>
                <div class="statistics-value">{{ statistics.roleCount }}</div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="statistics-card" shadow="hover">
          <el-skeleton :loading="loading" animated>
            <template #template>
              <div style="padding: 14px">
                <el-skeleton-item variant="h3" style="width: 50%" />
                <div style="display: flex; align-items: center; margin-top: 16px">
                  <el-skeleton-item variant="text" style="margin-right: 16px" />
                  <el-skeleton-item variant="text" style="width: 30%" />
                </div>
              </div>
            </template>
            <template #default>
              <div class="statistics-item">
                <div class="statistics-title">菜单数量</div>
                <div class="statistics-value">{{ statistics.menuCount }}</div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="statistics-card" shadow="hover">
          <el-skeleton :loading="loading" animated>
            <template #template>
              <div style="padding: 14px">
                <el-skeleton-item variant="h3" style="width: 50%" />
                <div style="display: flex; align-items: center; margin-top: 16px">
                  <el-skeleton-item variant="text" style="margin-right: 16px" />
                  <el-skeleton-item variant="text" style="width: 30%" />
                </div>
              </div>
            </template>
            <template #default>
              <div class="statistics-item">
                <div class="statistics-title">登录次数</div>
                <div class="statistics-value">{{ statistics.loginCount }}</div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="system-info-card">
      <template #header>
        <div class="card-header">
          <span>系统信息</span>
        </div>
      </template>
      <div class="system-info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="系统名称">Gin Admin 管理系统</el-descriptions-item>
          <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
          <el-descriptions-item label="前端框架">Vue 3 + Element Plus</el-descriptions-item>
          <el-descriptions-item label="后端框架">Gin + GORM</el-descriptions-item>
          <el-descriptions-item label="权限管理">Casbin</el-descriptions-item>
          <el-descriptions-item label="开发者">Your Name</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-content {
  padding: 10px 0;
}

.statistics-row {
  margin-bottom: 20px;
}

.statistics-card {
  height: 120px;
}

.statistics-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 10px;
}

.statistics-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
}

.statistics-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
}

.system-info-card {
  margin-bottom: 20px;
}

.system-info {
  padding: 10px 0;
}
</style> 